import React, { Component, lazy, Suspense } from 'react'
import { Route,Switch } from 'react-router-dom'
import Detail from './views/Detail'
import Fav from './views/Fav';
import checkLoginHoc from './check/checkLogin';
const Home = lazy(()=>import("@/views/Home"))
const Search = lazy(()=>import("@/views/Search"))
const Login = lazy(()=>import("@/views/Login"))
const FavCmp = checkLoginHoc(Fav)


export default class App extends Component {
  render() {
    return (
      <Suspense fallback={<div>loading...</div>}>
        <Switch>
        <Route path="/search" component={Search}></Route>
        <Route path="/detail/:id" component={Detail} />
        <Route path="/login" component={Login}/>
        <Route path="/fav" component={FavCmp}/>
        <Route path="/" component={Home}></Route>
        </Switch>
      </Suspense>
    )
  }
}
